<template>
  <div class="detail">
    <detail-banner 
      :sightName="sightName"
      :bannerImg="bannerImg"
      :bannerImgs="gallaryImgs"
    ></detail-banner>
    <detail-header></detail-header>
    <detail-base-info></detail-base-info>
    <detail-location></detail-location>
    <detail-aday></detail-aday>
    <detail-comments></detail-comments>
    <detail-look></detail-look>
    <!-- 递归组件
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div> -->
  </div>
</template>

<script>
import DetailBanner from "./components/Banner";
import DetailHeader from "./components/Header";
import DetailBaseInfo from "./components/BaseInfo";
import DetailLocation from "./components/Location";
import DetailAday from "./components/Aday";
import DetailComments from "./components/Comments";
import DetailLook from "./components/Look";

import DetailList from "./components/List";
import axios from 'axios'

export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailBaseInfo,
    DetailLocation,
    DetailAday,
    DetailComments,
    DetailLook,
    DetailList,
  },
  data() {
    return {
      sightName: '',
      bannerImg: '',
      gallaryImgs: [],
      list: []
       // list: [{
      //   title: '成人票',
      //   children: [{
      //     title: '成人三馆联票',
      //     children:[{
      //       title: '成人三馆联票-某连锁店销售'
      //     }]
      //   }, {
      //     title: '成人五馆联票'
      //   }]
      // }, {
      //   title: '学生票'
      // }, {
      //   title: '儿童票'
      // }, {
      //   title: '特惠票'
      // }]
    };
  },
  methods: {
    getDetailInfo() {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleGetDataSucc)
    },
    handleGetDataSucc(res) {
      res = res.data
      if(res.ret && res.data) {
        const data = res.data
        this.sightName = data.sightName
        this.bannerImg = data.bannerImg
        this.gallaryImgs = data.gallaryImgs
        this.list = data.categoryList
      }
    }
  },
  mounted() {
    this.getDetailInfo();
  },
};
</script>

<style lang="stylus" scoped>
.detail {
  background: #e9e9e9;
}

.content {
  height: 50rem;
}
</style>